<template>
  <div class="category-view">
    <!-- 分类标题 -->
    <el-card class="category-header">
      <div class="category-info">
        <h1>
          <el-icon><Folder /></el-icon>
          {{ currentCategory }}
        </h1>
        <p class="count">共 {{ total }} 篇文章</p>
      </div>
    </el-card>

    <!-- 分类筛选 -->
    <el-card class="category-filter">
      <el-tabs v-model="activeCategory" @tab-change="handleCategoryChange">
        <el-tab-pane
          v-for="category in categories"
          :key="category.value"
          :label="`${category.label} (${category.count})`"
          :name="category.value"
        />
      </el-tabs>
    </el-card>

    <!-- 博客列表 -->
    <el-card v-loading="loading">
      <blog-list
        :blogs="blogs"
        :loading="loading"
      />
      
      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Folder } from '@element-plus/icons-vue'
import { useBlogStore } from '@/stores/blog'
import BlogList from '@/components/blog/BlogList.vue'

const route = useRoute()
const router = useRouter()
const blogStore = useBlogStore()

// 状态
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const activeCategory = ref('')

// 分类数据
const categories = ref([
  { label: '全部', value: 'all', count: 0 },
  { label: '技术', value: 'tech', count: 0 },
  { label: '生活', value: 'life', count: 0 },
  { label: '随笔', value: 'essay', count: 0 },
  { label: '其他', value: 'other', count: 0 }
])

// 计算属性
const blogs = computed(() => blogStore.blogs)
const currentCategory = computed(() => {
  const category = categories.value.find(c => c.value === activeCategory.value)
  return category ? category.label : '全部分类'
})

// 方法
const fetchBlogs = async () => {
  loading.value = true
  try {
    await blogStore.fetchBlogs({
      page: currentPage.value,
      pageSize: pageSize.value,
      category: activeCategory.value === 'all' ? undefined : activeCategory.value
    })
    total.value = blogStore.total
  } catch (error) {
    console.error('Failed to fetch blogs:', error)
    ElMessage.error('获取文章列表失败')
  } finally {
    loading.value = false
  }
}

const fetchCategories = async () => {
  try {
    // TODO: 实现获取分类统计的逻辑
    // const res = await blogStore.fetchCategories()
    // categories.value = res
  } catch (error) {
    console.error('Failed to fetch categories:', error)
  }
}

const handleCategoryChange = (category: string) => {
  router.push({
    path: '/category/' + category,
    query: {
      page: '1'
    }
  })
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  updateRoute()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  updateRoute()
}

const updateRoute = () => {
  router.push({
    path: route.path,
    query: {
      page: currentPage.value.toString(),
      size: pageSize.value.toString()
    }
  })
}

// 监听路由变化
watch(
  () => route.params.category,
  (newCategory) => {
    if (newCategory) {
      activeCategory.value = newCategory as string
    }
  },
  { immediate: true }
)

watch(
  () => route.query,
  (query) => {
    currentPage.value = Number(query.page) || 1
    pageSize.value = Number(query.size) || 10
    fetchBlogs()
  },
  { immediate: true }
)

// 生命周期钩子
onMounted(() => {
  fetchCategories()
})
</script>

<style lang="scss" scoped>
.category-view {
  .category-header {
    margin-bottom: 20px;
    
    .category-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      h1 {
        margin: 0;
        font-size: 24px;
        display: flex;
        align-items: center;
        gap: 10px;
        
        .el-icon {
          font-size: 24px;
          color: $primary-color;
        }
      }
      
      .count {
        color: $text-secondary;
        margin: 0;
      }
    }
  }
  
  .category-filter {
    margin-bottom: 20px;
    
    :deep(.el-tabs__header) {
      margin-bottom: 0;
    }
  }
  
  .pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

// 响应式布局
@media (max-width: $breakpoint-sm) {
  .category-view {
    .category-header {
      .category-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
    }
  }
}
</style> 